<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>考试</title>
<style>
body,div,ul,ol,dt,dd,dl,li,h1,h2,h3,h4,h5,h6,form,input,select,textarea,p,img,a,span,strong,*{ padding:0; margin:0;}
body{ font-size:12px; font-family:"宋体"; color:#000000; background-color:#FFFFFF;}
ul,ol,li{ list-style:none;}
h1,h2,h3,h4,h5,h6{ font-size:14px;}
img,input,select,textarea{ vertical-align:middle}
img{ border:none;}
a{ color:#333333; text-decoration:none;}
a:hover{ color:#003366;}
.clear{ clear:both; height:0; width:0; overflow:hidden;}
body,html{
    background: #ddd;
}
#bos{
    /* background: #fff; */
    /* margin:50px auto; */
    font-size: 21px;
}
table{
    width: 80%;
    height: 100%;
    font-size: 21px;
    text-align: center;
}
#jia,#jian{
    width: 20px;
    height: 20px;
}
#shan{
    width: 65px;
    height: 25px;
    font-size: 14px;
}
#zongjia{
    width: 60px;
    height: 30px;
    font-size: 16px;
}
</style>    
</head>
<body>
<div id="bos">
<table border="1" class="my-table" id="tab">
    <tr>
        <th><input type="checkbox" id="quanxuan">全选</th>
        <th>商品编号</th>
        <th>商品名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
    </tr>
    <tbody id="tbodys">

    </tbody>            
</table>
    <div id="box">总价：<span id="zong"></span>元</div>
</div>
<script src="./jq3.js"></script>
<script src="./data.js"></script>
<script>
var log = console.log;
//方法1
window.onload = function(){
    for(var i=0;i<data.length;i++){
        // log(i)
        for(var j=0;j<data[i].all.length;j++){
            // log(data[i].all)
            var str = `
            <tr>
                <td><input type="checkbox"></td>
                <td>${data[i].all[j].id}</td>
                <td>${data[i].all[j].name}</td>
                <td><span id="xiaoji1">${data[i].all[j].price}</span>元</td>
                <td>
                    <button id="jian">-</button>
                    <input  type="text" id="xiaoji2" value="${data[i].all[j].num}">
                    <button id="jia">+</button>
                </td>
                <td><span id="xiaoji3">${data[i].all[j].price*data[i].all[j].num}</span>元</td>
                <td><button id="shan">删除</button></td>
            </tr>
            ` 
            tbodys.innerHTML += str
        } 
       
    }
    // zongjia()
//加减
var jj = document.querySelector('.my-table')
jj.onclick = function(evt){
    var e = evt || window.event;
    var target = e.target || e.srcElement;
    //加
    if(target.innerText == "+"){
        target.previousElementSibling.value++;
        xiaoji(target)
    }
    //减    （和判断）
    if(target.innerText == "-"){
        target.nextElementSibling.value--;
        if(target.nextElementSibling.value <=1 ){
            target.nextElementSibling.value = 1; 
        }
        xiaoji(target)
    } 
      
}
//小计
function xiaoji(the){
    var a = the.parentNode.parentNode.querySelectorAll("span")
    var b = the.parentNode.querySelector("input[type='text']")
    a[1].innerHTML = a[0].innerHTML*b.value
}
//总价计算
function zongjia(){
    var xuanzhong = document.querySelectorAll("input[type='text']")
    var kong = 0;
    for(let i=0;i<xuanzhong.length;i++ ){
        var sp = xuanzhong[i].parentNode.parentNode.querySelectorAll("span")
        kong += sp[1].innerHTML*1
    }    
    zong.innerHTML = kong
}
//全选
quanxuan.onclick = function(){
    var check = document.querySelectorAll("input[type='checkbox']")
    var zong = document.getElementById("zong")
    if(this.checked){
//全选        
        for(var i=0;i<check.length;i++){
            check[i].checked = true;
        } 
        zongjia()
    }else{
//反选        
        for(var i=0;i<check.length;i++){
            check[i].checked = false;
        }
        zong.innerHTML = ""
    }
}
//删除
    tbodys.onclick = function(evt){
        // log(evt)
        var e = evt || window.event;
        var target = e.target || e.srcElement;
        // console.log(target.value)
        if(target.innerText == "删除"){
            target.parentNode.parentNode.remove();
        }
    }
}
</script>    
</body>
</html>